import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import { connect } from 'react-redux';
import {mall_them_hos_servItem} from '../../actions';
import {getHosImg,getDocImg,getServImg} from '../../actions/ActionTypes';
let Swiper = require('swiper');

const test1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/boniaosuan_750_480.png');
const test2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/roudusu_750_480.png');

let this_a = {};
let mydefault = React.createClass({
  componentDidMount:function(){
    // console.log($('.mall_them_weiz .swiper_a').length)

    $('.mall_them_weiz .swiper_a').each(function(){
      let thisClass = 'swiper_a' + $(this).index();
      $(this).addClass(thisClass);

      console.log(thisClass)
      this_a[thisClass] = new Swiper('.'+thisClass,{
          paginationClickable: true,
          slidesPerView: 'auto',
          calculateHeight:true
        })
    })
      const {dispatch} = this.props;
      dispatch(mall_them_hos_servItem());
  },
  setSwiper:function(){
    $('.mall_them_weiz .swiper_a').each(function(){
      let thisClass = 'swiper_a' + $(this).index();
      $(this).addClass(thisClass);
        new Swiper('.'+thisClass,{
          paginationClickable: true,
          slidesPerView: 'auto',
          calculateHeight:true
        })
    })
  },
  componentDidUpdate:function(){
    for (var a in this_a) {
      this_a[a].reInit();
    }
  },
  render:function(){
    let mall_them_hos_servItem = this.props.mall_them_hos_servItem || [];
        // console.log(itemPro)
    return(
      <div id="mall_view">
      <div className="mall_them_weiz">
        <div className="item_wrapper">
          <div className="item">
            <h3 className="tit_sty1">微整专场<br/><small>Special skin</small></h3>
            <NavLink to="/pro/list/55" className="img_txt mask">
              <ImageLazy src={test1} style={{height:'4.8rem'}} />
              <h4>
                祛黑眼圈专场<br/><small>十分钟重现青春容颜</small>
              </h4>
              <p>立即查看 &#9658;</p>
            </NavLink>
            <div className="swiper_a swiper-container">
              <div className="swiper-wrapper">
                {
                  mall_them_hos_servItem.map(function(item,index){
                    let imgSrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId)
                    if(item.icId == 55){
                    return(
                        <NavLink to={"/servItem/det/" + item.itemId} className="swiper-slide">
                          <div className="wrapper">
                            <div className="pic">
                              <ImageLazy src={imgSrc} style={{height:'3rem'}} />
                            </div>
                            <div className="det box">
                              <div className="name txt_ellip">{item.itemName}</div>
                              <div className="author">{item.doctorName}{item.doctorTitle}</div>
                              <div className="price">
                                <span>&yen; {item.sellingPrice}.00</span>
                                <i className="iconfont icon-buy_car"></i>
                              </div>
                            </div>
                          </div>
                        </NavLink>
                      )
                    }
                  })
                }

              </div>
            </div>
            <NavLink to="/pro/list/56" className="img_txt mask">
              <ImageLazy src={test2} style={{height:'4.8rem'}} />
              <h4>
                填充卧蚕专场<br/><small>一针改写命运 即现精致小脸</small>
              </h4>
              <p>立即查看 &#9658;</p>
            </NavLink>
            <div className="swiper_a swiper-container">
              <div className="swiper-wrapper">
              {
                mall_them_hos_servItem.map(function(item,index){
                  let imgSrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId)
                  if(item.icId == 56){
                  return(
                      <NavLink to={"/servItem/det/" + item.itemId} className="swiper-slide">
                        <div className="wrapper">
                          <div className="pic">
                            <ImageLazy src={imgSrc} style={{height:'3rem'}} />
                          </div>
                          <div className="det box">
                            <div className="name txt_ellip">{item.itemName}</div>
                            <div className="author">{item.doctorName}{item.doctorTitle}</div>
                            <div className="price">
                              <span>&yen; {item.sellingPrice}.00</span>
                              <i className="iconfont icon-buy_car"></i>
                            </div>
                          </div>
                        </div>
                      </NavLink>
                    )
                  }
                })
              }
              </div>
            </div>
          </div>


        </div>

      </div>
      </div>
    )
  }
})

let mapStateToProps = (state,own) => {

    let mall_them_hos_servItem = state.mall.mall_them_hos_servItem || [];
    // console.log(own.params.id)
    console.log(state.mall)
  return{
    mall_them_hos_servItem,
    ic_id:own.params.id
  }
}

export default connect(mapStateToProps)(mydefault);
